import { AfterViewInit, Component, OnInit, Input } from '@angular/core';
import { FormControl, NgForm, NgModel } from '@angular/forms';

@Component({
    selector: 'op-single-error-message',
    templateUrl: './single-error-message.component.html'
})
export class SingleErrorMessageComponent implements AfterViewInit, OnInit {
    @Input() formModel: NgForm;
    @Input() fieldModel: FormControl | NgModel;
    @Input() field: any;
    @Input() labelTitle: string;
    @Input() formatDetails?: string;
    @Input() checkedValue?: string;
    title: string;

    constructor() { }

    ngOnInit(): void {
        // console.log(this.field.minLength);
    }

    ngAfterViewInit(): void {
        // Set the this.title without waiting a tick will cause below error.
        // ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: undefined'. Current value: 'null: xxx'.
        // More details check on https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained
        window.setTimeout(() => {
            this.title = this.labelTitle || this.field.placeholder;
        }, 0);
    }
}